<template>
    <div class="carousel">
      <van-swipe 
        :autoplay="3000"
        indicator-color="#27BA9B"
      >
        <template v-for="(item,index) in banners" :key="item.id">
            <van-swipe-item v-if="index < 3">
                <div class="image-box">
                    <van-image class="image" fit="contain" :src="global.MINIO_FILE_DOMAIN + item.image_url"/>
                </div>
            </van-swipe-item>
        </template>
      </van-swipe>
    </div>
  </template>
  
<script setup>
import { inject } from 'vue'
  
defineProps({
    'banners': {
        type: Array,
        default: []
    }
})
  
// 全局属性
const global = inject('global')

</script>
  
<style lang="scss">
  /* 轮播图 */
  .carousel {
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    background-color: #efefef;
    .image-box,
    .image {
      width: 100%;
      height: 100%;
    }
  }
</style>